<template>
  <div class="charts" ref="charts"></div>
</template>

<script>
  import * as echarts from 'echarts';
  export default {
    components: {},
    data() {
      return {

      };
    },
    mounted() {
      this.initChart()
    },
    methods: {
      initChart() {
        let charts = echarts.init(this.$refs.charts)
        let data = [87];
        let option = {
          tooltip: {
          },
          xAxis: {
            show: false,
            min: 0,
            max: 100
          },
          yAxis: {
            show: false,
            type: 'category'
          },
          series: [{
            name: 'Fake Data',
            type: 'bar',
            data: data,
            barWidth: 10,
            color:'#32b952',
            showBackground: true,
            backgroudStyle:{
              color: '#eee'
            },
            label:{
              show: true,
              formatter: '|',
              posotion: 'right'
            }
          }],
          grid: {
            left: 0,
            top: 0,
            right: 0,
            bottom: 0
          }
        };
        charts.setOption(option)
      }
    }
  }
</script>
<style lang='less' scoped>
  .charts {
    width: 100%;
    height: 100%;
  }
</style>
